<template lang="html">
    <div class="">
        <div class="menuview-wrapper">
            <div class="menu-wrapper" ref="menuWrapper">
                <div class="" >
                    <div @click="goFood(index)" class="menu-item" :class="{act:index==currentIndex}" v-for="(menu,index) in goods">
                        {{menu.name}}
                    </div>
                </div>
            </div>

            <div class="goods-wrapper" ref="goodsWrapper">
                <div class="">
                    <dl class="" v-for="good in goods">
                        <dt class="food-list-hook">{{good.name}}</dt>
                        <dd v-for="food in good.foods">
                            <img :src="food.image" alt="">
                            <div class="goods-info">
                                <h4>{{food.name}}</h4>
                                <div class="description" v-if="food.description">
                                    {{food.description}}
                                </div>
                                <div class="msg">
                                    月售 {{food.sellCount}} 份 好评率 {{food.rating}}%
                                </div>
                                <div class="price">
                                    <span>￥ {{food.price}}</span>
                                    <div class="cartbutton">
                                        <cartbutton @dropBall="dropBall($event)" :food="food"></cartbutton>
                                    </div>
                                </div>

                            </div>

                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <shopcart ref="shopcart" :selectedFood="selectedFood"></shopcart>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
import cartbutton from '@/components/cartbutton/cartbutton'
import shopcart from '@/components/shopcart/shopcart'

export default {
	components: {
		Bscroll,
		cartbutton,
		shopcart
	},
	data() {
		return {
			goods: [],
			listHeight: [],
			menuScroll: '',
			foodScroll: '',
			scrollY: 0
		}
	},
	computed: {
		currentIndex() {
			for (let i = 0; i < this.listHeight.length; i++) {
				//当前
				let height = this.listHeight[i];
				//下一个
				let next = this.listHeight[i + 1];
				if (this.scrollY >= height && this.scrollY < next) {
					return i;
				}
				if (!next) {
					return i;
				}
			}
			return 0;
		},
		//通过遍历商品，food.count>1的就是被选中的
		selectedFood() {
			let foods = [];
			if (this.goods.length == 0) return [];
			this.goods.forEach((good) => {
				good.foods.forEach((food) => {
					if (food.count >= 1) {
						foods.push(food);
					}
				})
			})
			return foods;
		}
	},
	methods: {
		//初始化滚动
		_initScroll() {
			this.menuScroll = new Bscroll(this.$refs.menuWrapper, {
				click: true
			})
			this.foodScroll = new Bscroll(this.$refs.goodsWrapper, {
				probeType: 3,
				click: true
			})
			this.foodScroll.on('scroll', (pos) => {
				this.scrollY = Math.abs(Math.round(pos.y));
			})
		},
		//计算区间高度
		_countHeight() {
			let lists = this.$refs.goodsWrapper.getElementsByClassName('food-list-hook');
			for (let i = 0; i < lists.length; i++) {
				let item = lists[i];
				this.listHeight.push(item.offsetTop);
			}
		},
		//点击menu 滑动到对应的食物
		goFood(index) {
			this.currentIndex = index;
			let go = this.listHeight[index];
			this.foodScroll.scrollTo(0, -go, 100);
		},
		//
		dropBall(target) {
			this.$refs.shopcart.dropBall(target);
		}
	},
	mounted() {
		this.axios.get('http://localhost:8080/api/goods').then((res) => {
			this.goods = res.data.data;
			this.$nextTick(() => {
				//绑定滚动
				this._initScroll();
				//计算高度数组
				this._countHeight();
			})
		})
		//给商品列表绑定Bscroll滚动事件
		//给商品列表绑定B

	},

}
</script>

<style lang="less" scoped>
@import '../../../static/var.less';
.menuview-wrapper {
    position: absolute;
    width: 100%;
    top: @base*355rem;
    bottom: @base*96rem;
    display: flex;
    overflow: hidden;
    background: #fff;
    .menu-wrapper {
        width: @base*170rem;
        height: 100%;
        background: #fff;
        .menu-item {
            width: @base*140rem;
            height: @base*60rem;
            padding: @base*35rem @base*15rem;
            background: @bggray;
            border-bottom: 1px solid @lc1;
            font-size: @base*24rem;
            &.act {

                background: #fff;
                border-left: @base*5rem solid @main-color;
                width: @base*135rem;
            }
            span {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

    }
    .goods-wrapper {
        flex: 1;
        height: 100%;
        background: #fff;
        dl {
            dt {
                height: @base*32rem;
                padding: @base*15rem @base*20rem;
                font-size: @base*28rem;
                background: @bggray;
                color: @fc2;
            }
            dd {
                min-height: @base*228rem;
                position: relative;
                display: flex;
                justify-content: space-between;
                padding: @base*30rem @base*20rem;
                img {
                    width: @base*104rem;
                    height: @base*104rem;
                    margin-right: @base*15rem;
                }
                .goods-info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    h4 {
                        font-size: @base*32rem;
                        color: #333;
                    }
                    .msg {
                        color: @fc1;
                        font-size: @base*10rem;
                    }
                    .description {
                        color: @fc1;
                        font-size: @base*10rem;
                    }
                    .price {
                        color: red;
                        font-size: @base*24rem;
                        margin-top: @base*30rem;
                        display: flex;
                        justify-content: space-between;
                    }

                }

            }
        }
    }
}
</style>
